<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>优惠卷列表</title>
	<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />
    <link rel="stylesheet" href="/Public/Wap/coupon/css/base.css">
	<style>
		.couponList{}
		.couponList ul{}
		/* .couponList ul li{ background: blue url('public/images/coupon.png') 0 0 no-repeat; -webkit-background-size: 100%;
		background-size: 100%;height: 10.1rem;} */
		.couponList ul li {margin-bottom: 1rem; position: relative;}
		.couponList ul li a{display: block;}
		.couponList ul li a img{width: 100%;}

		.couponList ul li.on{}

		.couponList ul li .canuse{position: absolute; display: block; top: 0rem; right: 0rem;background: url('/Public/Wap/coupon/images/canuse.png') 0 0 no-repeat;width: 4rem;height: 4rem;background-size: 100%;}
		.huise{display: none;}
		.gray { 
		    -webkit-filter: grayscale(100%);
		    -moz-filter: grayscale(100%);
		    -ms-filter: grayscale(100%);
		    -o-filter: grayscale(100%);
		    filter: grayscale(100%);
		    filter: gray;
		}
		.couponList ul li.gray i{background: url('/Public/Wap/coupon/images/notcanuse.png') 0 0 no-repeat;background-size: 100%;}
	</style>
	<script type="text/javascript" src="/Public/Member/js/jquery.min.js"></script>
</head>
<body>
<include file='Coupon/nav'/>

	<div class="couponList">
		<ul>
			<li class="gray">
				<a href="{:U('Coupon/detail')}"><img class="huise" src="/Public/Wap/coupon/images/coupon.png" alt=""></a>
				<i class="canuse"></i>
			</li>
			<li class="gray">
				<a href="{:U('Coupon/detail')}"><img class="huise" src="/Public/Wap/coupon/images/coupon.png" alt=""></a>
				<i class="canuse"></i>
			</li>
			<li class="gray">
				<a href="{:U('Coupon/detail')}"><img class="huise" src="/Public/Wap/coupon/images/coupon.png" alt=""></a>
				<i class="canuse"></i>
			</li>
			<li class="gray">
				<a href="{:U('Coupon/detail')}"><img class="huise" src="/Public/Wap/coupon/images/coupon.png" alt=""></a>
				<i class="canuse"></i>
			</li>
		</ul>
	</div>

<script>
	$(function(){
        function huise(a) {
            var b = document.createElement("canvas");
            var c = b.getContext("2d");
            var d = new Image;
            d.src = a;
            b.width = d.width;
            b.height = d.height;
            c.drawImage(d, 0, 0);
            var e = c.getImageData(0, 0, b.width, b.height);
            for (var f = 0; f < e.height; f++) {
                for (var g = 0; g < e.width; g++) {
                    var h = f * 4 * e.width + g * 4;
                    var i = (e.data[h] + e.data[h + 1] + e.data[h + 2]) / 3;
                    e.data[h] = i;
                    e.data[h + 1] = i;
                    e.data[h + 2] = i
                }
            }
            c.putImageData(e, 0, 0, 0, 0, e.width, e.height);
            return b.toDataURL()
        }
        setTimeout(function(){
        	$(".huise").each(function(){
				this.src = huise(this.src);
				$(this).show();
			});	
        },10);
		
	});
</script>

</body>
</html>